<template>
    <li class="card">
        <div class="card__content">
            <div class="card__image">
                <img :src="baseURL + item.img" alt="" @click="pathTo(item)">
                <div>
                </div>
            </div>
            <div class="card__digest">
                <h3>{{ item.name }}</h3>
                <span>{{ item.count }}kg</span>
                <strong>${{ item.price }}</strong>
            </div>
        </div>
        <div class="card__control">
            <span class="card__delete" v-show="mode === 'card'" @click="clear"><van-icon size="16"
                    name="delete-o" /></span>

            <div @click="handleDelete" v-show="mode === 'card'">
                <van-icon color="var(--font-color)" size="10rem" name="minus" />
            </div>
            <span>{{ mode === 'card' ? item.count : `数量: ${item.count}` }}</span>
            <div v-show="mode === 'card'" @click="handleAdd">
                <van-icon color="var(--font-color)" size="10rem" name="plus" />
            </div>
        </div>
    </li>
</template>

<script setup lang="ts">
import { baseURL } from '@/api/request';
import { useRouter } from 'vue-router';
import type { ShopBagType } from '../../home/index.vue'
defineProps({
    mode: {
        type: String,
        default: 'card'
    }
})
const router = useRouter()
const item = defineModel<ShopBagType>()
const handleAdd = () => {
    item.value.count += 1
}
const handleDelete = () => {
    item.value.count -= 1
}
const clear = () => {
    item.value.count = 0
}
const pathTo = (item) => {
    router.push({
        path: `/details/${item.id}`,
        query: { item: JSON.stringify(item) },
    });
}
</script>

<style scoped lang="scss">
.card {
    color: var(--font-color);
    height: 96rem;
    width: 100%;
    border-radius: 8rem;
    margin-bottom: 20rem;
    box-sizing: border-box;
    border: var(--border-color) 2px solid;
    padding: 10rem;
    @include flex($ai: center, $jc: space-between);
    position: relative;

    &:last-child {
        margin-bottom: 10rem;
    }

    &__content {
        @include flex($ai: center);

    }

    &__delete {
        @include absolutePOS($r: 10rem, $t: 10rem);
    }

    &__control {
        margin-bottom: 8rem;
        @include flex($jc: center, $ai: flex-end);
        font-size: 12rem;
        height: 100%;



        span {
            margin: 0 4rem;
            height: 14rem;
        }

        div {
            height: 18rem;
            width: 18rem;
            outline: 1px solid var(--border-color);
            @include flex($jc: center, $ai: center);
            border-radius: 50%;
        }

    }

    &__digest {
        @include flex(column, flex-start, space-between);
        height: 50rem;
        margin-left: 10rem;

        h3 {
            font-weight: 600;
        }

        span {
            font-weight: 100;
        }

        span,
        strong {
            font-size: 10rem;
        }
    }

    &__image {
        height: 60rem;
        width: 66rem;
        position: relative;
        @include flex($ai: flex-end);

        img {
            @include absolutePOS($t: 2rem, $l: 50%);
            transform: translateX(-50%);
            height: 74%;
            width: 74%;
        }

        >div {
            height: 35rem;
            width: 66rem;
            border-radius: 4rem;
            background-color: $color-pink;
        }
    }



}
</style>